<template>
  <div class="container" v-if="weeklyData">
    <div class="change-bar font-14 pad-8 align-c">
      <div class="flex v-align-c">        
        <span>数据时间：{{weekStartDate}}-{{weekEndDate}}</span>
      </div>    
    </div>
    <div class="panel panel-box mar-t-10 pad-l-8 pad-r-8">
      <h2 class="font-14 mar-t-10 pad-b-6 border-b">数据概况</h2>
      <ul>
        <li class="flex v-align-c border-b panel-item" @click="detailPage('1')">
          <span class="font-13 mar-r-15">累计客户数</span>
          <span class="flex-item font-13 font-gray">{{weeklyData.countTotalCustomer}}人</span>
          <span class="font-12 font-gray check">查看详情</span>
          <icon class="iconfont icon-arrow-right font-14 arrow-pc"></icon>
        </li>
        <li class="flex v-align-c border-b panel-item" @click="detailPage('2')">
          <span class="font-13 mar-r-15">新增客户数</span>
          <span class="flex-item font-13 font-gray">{{weeklyData.countAddCustomer}}人</span>
          <span class="font-12 font-gray check">查看详情</span>
          <icon class="iconfont icon-arrow-right font-14 arrow-pc"></icon>
        </li>
        <li class="flex v-align-c panel-item" @click="detailPage('3')">
          <span class="font-13 mar-r-15">活跃客户数</span>
          <span class="flex-item font-13 font-gray">{{weeklyData.countActiveCustomer}}人</span>
          <span class="font-12 font-gray check">查看详情</span>
          <icon class="iconfont icon-arrow-right font-14 arrow-pc"></icon>
        </li>
      </ul>
    </div>
    <div class="panel panel-box mar-t-10 pad-l-8 pad-r-8">
      <h2 class="font-14 mar-t-10 pad-b-6 border-b">数据统计</h2>
      <ul>
        <li class="flex v-align-c border-b panel-item" @click="detailPage('4')">
          <span class="font-13 mar-r-15">店铺访问量</span>
          <span class="flex-item font-13 font-gray">{{weeklyData.countCardVisits}}次</span>
          <span class="font-12 font-gray check">查看详情</span>
          <icon class="iconfont icon-arrow-right font-14 arrow-pc"></icon>
        </li>
        <li class="flex v-align-c border-b panel-item" @click="detailPage('7')">
          <span class="font-13 mar-r-15">商品转发量</span>
          <span class="flex-item font-13 font-gray">{{weeklyData.countGoodsForward}}次</span>
          <span class="font-12 font-gray check">查看详情</span>
          <icon class="iconfont icon-arrow-right font-14 arrow-pc"></icon>
        </li>
      </ul>
    </div>
    <div v-if="followBoolean" class="height-70"></div>
    <cover-view v-if="followBoolean" class="follow-bar flex v-align-c">
      <cover-image v-if="fileSpace" @click=" followBoolean = false " mode="widthFix" class="width-28 height-28 mar-l-10 mar-r-5"
           :src="fileSpace + '/images/icon-close.png'"/>
      <cover-image v-if="fileSpace" mode="widthFix" class="width-34 height-28 mar-r-20"
          :src="fileSpace + '/images/icon-wechat.png'"/>
      <cover-view class="flex-item">
        <cover-view class="font-15">关注萤火V客公众号</cover-view>
        <cover-view class="font-12">最新周报数据定时推送！</cover-view>
      </cover-view>
      <cover-view class="font-12 now-btn">马上关注</cover-view>
    </cover-view>
  </div>
</template>

<script>
  import {
    countWeekly
  } from '@/api/personal'

  export default {
    data() {
      return {
        weeklyData: null,
        followBoolean: false,
        percent: 0.5215,
        strokeColor: '#ec6700',
        strokeBgColor: '#f3f3f3',
        strokeWidth: 4,
        weekStartDate: '',
        weekEndDate: '',
        percentBoolean: false
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onShow() {
      let title = ''
      if (this.getVeekrayStatus === 0) {
        title = '客户周报'
      } else if (this.getVeekrayStatus === 1) {
        title = '获客周报'
      }
      this.$pt.setNavigationBarTitle({
        title: title
      })
      this.countWeekly()
      this.getWeekDate()
    },
    methods: {
      formatDate(date) {
        let myyear = date.getFullYear()
        let mymonth = date.getMonth() + 1
        let myweekday = date.getDate()
        if (mymonth < 10) {
          mymonth = '0' + mymonth
        }
        if (myweekday < 10) {
          myweekday = '0' + myweekday
        }
        return (myyear + '.' + mymonth + '.' + myweekday)
      },
      // 获得本周的开始日期
      getWeekDate() {
        let now = new Date()
        let nowDayOfWeek = now.getDay()
        let nowDay = now.getDate() - 6
        let nowMonth = now.getMonth()
        let nowYear = now.getYear()
        nowYear += (nowYear < 2000) ? 1900 : 0
        let weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)
        this.weekStartDate = this.formatDate(weekStartDate)
        let weekEndDate = new Date(nowYear, nowMonth, nowDay + (6 - nowDayOfWeek))
        this.weekEndDate = this.formatDate(weekEndDate)
      },
      countWeekly() {
        countWeekly({
          memberId: this.getCustomerId
        }).then((response) => {
          if (response.isError) return
          this.weeklyData = response.data
        }).catch(() => {
        })
      },
      detailPage(e) {
        this.$pt.navigateTo({ url: '/pages/home/weekly/detail/main?type=' + e })
      }
    }
  }
</script>

<style lang="less" scoped>
  .layer-vip{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;
    margin: -127px 0 0 -133px;
    text-align: center;
    .layer-btn{
      position: absolute;
      left: 50%;
      bottom: 73px;
      width: 143px;
      height: 35px;
      margin-left: -58px;
      display: inline-block;
      z-index: 110;
    }  
    .layer-close{
      margin: 0 auto;
      padding-left: 26px;
    }
  }
  .layer-vip-bg{
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
  }
  .contentbox {
    width: 120px;
    height: 120px;
    position: 10;
  }
  .change-bar{
    background: #f9f4d7;
  }
  .panel-box{
    h2{
      &:before{
        content: '';
        display: inline-block;
        vertical-align: top;
        width: 5px;
        height: 15px;
        background: #f8c400;
        margin: 3px 10px 0 6px;
      }
    }
    .panel-item{
      padding: 16px 0 16px 20px;
    }
    .check{
      margin-top: -2px;
      margin-right: 3px;
    }
    .arrow-pc{
      color: #999999;
    }
    .font-gray {
      color: #999999;
    }
  }
  .follow-bar{
    background: #fff;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 13px 0;
    z-index: 50;
    .last-p{
      margin-top: -3px;
    }
    .now-btn{
      background: #10c261;
      border-radius: 50px;
      padding: 0px 10px;
      color: #fff;
      height: 26px;
      line-height: 26px;
      display: inline-block;
      margin-right: 13px;
    }
  }
  .total-bar{
    text-align: center;
    background: #fbf3d4;
    border-radius: 5px;
    padding: 9px 0;
    .font-12{
      margin-top: -2px;
    }
  }
  .circle-data{
    width: 70px;
    height: 70px;
    display: inline-block;
  }
</style>
